<template>
	<view class="all">
		<view class="blank"></view>
		
		<view class="top">
			<image mode="aspectFit" src="../../static/image/zhixingren.svg"  @click="tomy"></image>
			<view>首页</view>
			<view>车主服务</view>
			<image mode="aspectFit" src="../../static/image/xinxi.svg"></image>
		</view>
		
		<view class="bill">
			<view>
				<view class="number">444.9</view>
				<view class="text">口碑值</view>
			</view>
			<view>
				<view class="number">198.6</view>
				<view class="text">今日流水</view>
			</view>
			<view>
				<view class="number">10</view>
				<view class="text">今日接单</view>
			</view>
			<view>
				<view class="number">4.5</view>
				<view class="text">在线时长</view>
			</view>
			<image src="../../static/image/xiangyou.svg"></image>
		</view>
		
		<view class="middle">
			<image src="../../static/image/fanxingxi.svg"></image>
			<view>支付信息</view>
			<view class="no"></view>
			<view>13.28</view>
			<image src="../../static/image/dayuhao.svg"></image>
		</view>
		
		<view class="reminder">
			<view class="reminderone">
				<image class="1" src="../../static/image/dunyonghu.svg"></image>
			</view>
			<view class="reminderthree">
				<view>已接入彩云安全中心</view>
				<text>为维护司乘安全，行程开始后平台将自动开启全程录音保护</text>
			</view>
			<view class="remindertwo">
				<image class="2" src="../../static/image/chahao.svg"></image>
			</view>
		</view>
		
		<view class="order">
			<button>模式</button>
			<button @click="tograb">点击接单</button>
		</view>
	</view>
</template>

<script>
	export default {
		name:"upload-component",
		methods:{
			tograb(){
				uni.navigateTo({
					url:'/pages/works/grab'
				})
			},
			tomy(){
				uni.navigateTo({
					url:'/pages/works/my'
				})
			}
		}
	}
</script>

<style>
	.blank{
		height: 65rpx;
		background-color: rgb(240,240,240);
	}
	.top{
		display: flex;
		width: 100%;
		height: 100rpx;
		color: white;
		background-color: rgba(14,84,155,0.9);
		justify-content: center;
		align-items: center;
		justify-content: space-between;
	}
	.top image{
		width: 55rpx;
		height: 45rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.bill{
		display: flex;
		/* width: 100%; */
		height: 120rpx;
		
		align-items: center;
		margin-top: 50rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		justify-content: space-between;
	}
	.bill image{
		width: 30rpx;
		height: 30rpx;
	}
	.number{
		font-size: 50rpx;
	}
	.text{
		font-size: 27rpx;
	}
	
	.order{
		display: flex;
		align-items: center;
		height: 120rpx;
		background-color: rgba(14,84,155,0.9);
		margin-top: 550rpx;
		margin-left: 20rpx;
		border-radius: 20rpx;
		width: 95%;
		
	}
	.middle{
		display: flex;	
		align-items: center;
		border: 3rpx solid rgb(220,220,225);
		background-color: rgb(245,245,245);
		height: 80rpx;
		width: 99%;
		margin-top: 100rpx;
		margin-bottom: 100rpx;
		margin-left: 2rpx;
	}
	.middle image{
		height: 40rpx;
		flex: 1;
	}
	.no{
		width:50rpx;
		flex: 4;
	}
	.reminder{
		display: flex;
		width: 95%;
		height: 270rpx;
		border: 5rpx solid rgb(220,220,225);
		background-color: rgb(255,255,255);
		justify-content: center;
		border-radius: 15rpx;
		margin: 10rpx;
		box-shadow:-2rpx -2rpx 10rpx 1rpx #9899A9;
	}
	.reminderone image{
		height: 150rpx;
		width: 150rpx;
		margin-top: 40rpx;
	}
	.remindertwo image{
		height: 40rpx;
		width: 40rpx;
		margin-top: 15rpx;
	}
	.reminderthree{
		height: 50%;
		width: 70%;
		margin-top: 50rpx;
		font-size: 45rpx;
		font-weight: bold;
	}
	.reminderthree text{
		font-size: 30rpx;
		color: #8A8A8A;
		/* 字间距，行间距 */
/* 		letter-spacing: 10rpx;
		line-height: 10rpx; */
	}
	.order button{
		border-radius: 20rpx;
		background-color: #389FF8;
		color: white;
	}
</style>